<template>
  <div class="dashboard-count">
    <el-row v-show="basicvisible" :gutter="16">
      <!-- 第一列：左侧统计卡片 -->
      <el-col :span="4" class="left-col">
        <el-card
          v-for="item in leftStats.filter(i => i.title !== '已入库专家')"
          :key="item.title"
          class="stat-card"
          :style="{ background: item.bg }"
          shadow="never"
        >
          <div style="display:flex;align-items:center;">
            <span class="stat-value">{{ item.value }}</span>
            <i v-if="item.icon" :class="['stat-icon', item.icon]"></i>
          </div>
          <div class="stat-title">{{ item.title }}</div>
        </el-card>
      </el-col>
      <!-- 第二列：已入库专家卡片 + 高级人才统计卡片，纵向排列 -->
      <el-col :span="5" class="middle-col">
        <el-card class="expert-card" shadow="never">
          <div class="expert-card-content">
            <div class="expert-value">{{ leftStats.find(i => i.title === '已入库专家').value }}</div>
            <div class="expert-title">{{ leftStats.find(i => i.title === '已入库专家').title }}</div>
          </div>
          <i class="el-icon-graduation expert-icon"></i>
        </el-card>
        <el-card shadow="never" class="chart-card talent-card">
          <div class="chart-title">
            <i class="el-icon-data-analysis"></i>
            {{ chartsOrder[2].title }}
          </div>
          <div class="talent-echart-box">
            <div id="chart2" class="talent-echart"></div>
          </div>
          <div class="talent-legend-row" v-if="chartsOrder[2].legend">
            <div v-for="item in chartsOrder[2].legend" :key="item.name" class="talent-legend-item-row">
              <span class="talent-legend-color" :style="{ background: item.color }"></span>
              <span class="talent-legend-left">{{ item.name }}</span>
              <span class="talent-legend-right">{{ item.value }}</span>
              <span class="talent-legend-percent">{{ item.percent }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="15" class="middle-col">
        <el-row :gutter="32" class="chart-row" style="margin-top: 10px;">
        <el-col :span="8">
          <el-card shadow="never" class="chart-card">
            <div class="chart-title">
              <i class="el-icon-data-analysis"></i>
              {{ chartsOrder[0].title }}
            </div>
            <div id="chart0" class="echart-box"></div>
            <div class="chart-legend-row" v-if="chartsOrder[0].legend">
              <div v-for="item in chartsOrder[0].legend" :key="item.name" class="legend-item-row">
                <span class="legend-color" :style="{ background: item.color }"></span>
                <span class="legend-left">{{ item.name }}</span>
                <span class="legend-right">{{ item.value }}</span>
                <span class="legend-percent">{{ item.percent }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never" class="chart-card">
            <div class="chart-title">
              <i class="el-icon-data-analysis"></i>
              {{ chartsOrder[1].title }}
            </div>
            <div id="chart1" class="echart-box"></div>
            <div class="chart-legend-row" v-if="chartsOrder[1].legend">
              <div v-for="item in chartsOrder[1].legend" :key="item.name" class="legend-item-row">
                <span class="legend-color" :style="{ background: item.color }"></span>
                <span class="legend-left">{{ item.name }}</span>
                <span class="legend-right">{{ item.value }}</span>
                <span class="legend-percent">{{ item.percent }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never" class="chart-card">
            <div class="chart-title">
              <i class="el-icon-data-analysis"></i>
              {{ chartsOrder[3].title }}
            </div>
            <div id="chart3" class="echart-box"></div>
            <div class="chart-legend-row" v-if="chartsOrder[3].legend">
              <div v-for="item in chartsOrder[3].legend" :key="item.name" class="legend-item-row">
                <span class="legend-color" :style="{ background: item.color }"></span>
                <span class="legend-left">{{ item.name }}</span>
                <span class="legend-right">{{ item.value }}</span>
                <span class="legend-percent">{{ item.percent }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      </el-col>
      <!-- 第三列：其余环形图卡片横向排列 -->

    </el-row>
    
    <!-- 表格部分，使用负上边距拉近与上方卡片的距离 -->
    <el-row v-show="basicvisible" style="margin-top: -5px;">
      <el-col :span="24">
        <el-card class="table-card">
          <div slot="header" class="table-header">
            <i class="el-icon-collection"></i>
            <span>未入库申请列表</span>
          </div>
          <el-table :data="tableData" border stripe style="background: #fff; margin-top: -5px;">
            <!-- <el-table-column type="index" label="序号" width="60" /> -->
            <el-table-column 
align="center" 
label="序号" 
width="50"
>
<template slot-scope="scope">
  {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
</template>
</el-table-column>
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="auditStatus" label="审核状态" />
            <el-table-column prop="gender" label="性别" />
            <el-table-column prop="education" label="学历" />
            <el-table-column prop="primaryMajor" label="专业" />
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-link @click="handleView(scope.row)" type="primary">查看</el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top: 10px; margin-bottom: 5px; text-align: right;"
          />
        </el-card>
      </el-col>
    </el-row>
    <div v-show="editvisibale">
  <el-page-header   title="返回"  @back="back2" content="查看" style="line-height: 50px; border-radius: 5px; background-color: #ffffff;">
</el-page-header>
  <editblock  :row="row"></editblock>
</div>
  </div>
</template>

<script>
import echarts from 'echarts'
import editblock from './show.vue'
import {getExpertBasicInfo,expertcount,primaryMajor,education,library,total,checked,check,nocheck,fetchUnstoredExperts,getExpertAttach} from '@/api/table'
import {master} from '@/api/table'
export default {
  components:{
    editblock
  },
  name: 'DashboardCount',
  data() {
    return {
      row: {},
      pageSize:10,
      currentPage:1,
      editvisibale:false,
      basicvisible:true,
      leftStats: [
        { title: '已申请人数', value: 689, bg: 'linear-gradient(135deg, #3ec6a6 0%, #3ec6a6 100%)' },
        { title: '已审核人数', value: 531, bg: 'linear-gradient(135deg, #a259e6 0%, #a259e6 100%)' },
        { title: '待审核人数', value: 158, bg: 'linear-gradient(135deg, #3ec6e0 0%, #3ec6e0 100%)' },
        { title: '审核未通过人数', value: 10, bg: 'linear-gradient(135deg, #f16c7f 0%, #f16c7f 100%)' },
        { title: '已入库专家', value: 516, bg: 'linear-gradient(135deg, #FFD966 0%, #FFD966 100%)', icon: 'el-icon-graduation' }
      ],
      topStat: { title: '已入库专家', value: 516 },
      charts: [
        { title: '各专业专家数量', legend: [
          { name: '专业1xx', color: '#5470c6', value: 12, percent: '24%' },
          { name: '专业2xx', color: '#91cc75', value: 9, percent: '18%' },
          { name: '专业3xx', color: '#fac858', value: 7, percent: '14%' },
          { name: '专业4xx', color: '#ee6666', value: 6, percent: '12%' },
          { name: '专业5xx', color: '#73c0de', value: 5, percent: '10%' },
        ] },
        { title: '专家数量职称统计', legend: [
          { name: '正高级职称', color: '#5470c6', value: 15, percent: '37.5%' },
          { name: '副高级职称', color: '#91cc75', value: 10, percent: '25%' },
          { name: '同等职业资格', color: '#fac858', value: 8, percent: '20%' },
          { name: '其他', color: '#ee6666', value: 7, percent: '17.5%' },
        ] },
        { title: '高级人才统计', legend: [
          { name: '院士', color: '#5470c6', value: 10, percent: '25%' },
          { name: '全国勘察设计大师', color: '#91cc75', value: 5, percent: '12.5%' },
          { name: '专家需标识的特殊称号专家', color: '#fac858', value: 8, percent: '20%' },
          { name: '人才政策的紧缺专业、特殊高级技术人才', color: '#ee6666', value: 7, percent: '17.5%' },
        ] },
        { title: '专家学历统计', legend: [
          { name: '博士研究生', color: '#5470c6', value: 8, percent: '16%' },
          { name: '硕士研究生', color: '#91cc75', value: 12, percent: '24%' },
          { name: '大学本科', color: '#fac858', value: 10, percent: '20%' },
          { name: '大学专科', color: '#ee6666', value: 7, percent: '14%' },
          { name: '高中中专', color: '#73c0de', value: 5, percent: '10%' },
          { name: '初中及以下', color: '#3ba272', value: 3, percent: '6%' },
        ] },
      ],
      tableData: [
        { index: '', name: '', auditStatus: '', gender: '', education: '', primaryMajor: '' },
        { index: '', name: '', auditStatus: '', gender: '', education: '', primaryMajor: '' },
      ],
      chartsOrder: [{title:'',legend:[]},{title:'',legend:[]},{title:'',legend:[]},{title:'',legend:[]}]
    } 
  },
  methods:{
    // 专家数量职称统计
    expertcount(){
      expertcount().then(res => {
        console.log(res);
        const data = res.data || [];
        // 过滤掉title为"未知"的数据项
        const filteredData = data.filter(item => item.title !== '未知');
        // 颜色数组
        const colorArr = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#f16c7f'];
        // 计算总数
        const total = filteredData.reduce((sum, item) => sum + (item.expertCount || 0), 0);
        const legend = filteredData.map((item, idx) => ({
          name: item.title || '未知',
          color: colorArr[idx % colorArr.length],
          value: item.expertCount,
          percent: total ? ((item.expertCount / total * 100).toFixed(1) + '%') : '0%'
        }));
        // 生成 ECharts 饼图数据
        const pieData = filteredData.map((item, idx) => ({
          value: item.expertCount,
          name: item.title || '未知',
          itemStyle: {
            color: colorArr[idx % colorArr.length],
            shadowBlur: 10,
            shadowColor: colorArr[idx % colorArr.length]
          }
        }));
        this.$set(this.charts, 1, { title: '专家数量职称统计', legend });
        this.$set(this.chartsOrder, 1, this.charts[1]);
        // 渲染饼图
        this.$nextTick(() => {
          const chartDom = document.getElementById('chart1');
          if (chartDom) {
            // 检查是否已经存在图表实例，如果有则销毁
            const existingChart = echarts.getInstanceByDom(chartDom);
            if (existingChart) {
              existingChart.dispose();
            }
            
            // 根据容器宽度自适应调整字体大小和半径
            const containerWidth = chartDom.clientWidth || 300;
            const fontSize = '1vw';
            const emphasisFontSize = '1.2vw';
            const radiusPercentage = containerWidth < 300 ? ['60%', '75%'] : ['65%', '80%'];
            
            const myChart = echarts.init(chartDom);
            const pieOption = {
              tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
              legend: { show: false },
              animation: true,
              animationDuration: 800,
              animationEasing: 'cubicOut',
              animationDelay: 0,
              series: [
                {
                  name: '专家数量职称统计',
                  type: 'pie',
                  radius: radiusPercentage,
                  center: ['50%', '50%'],
                  avoidLabelOverlap: false,
                  label: {
                    show: true,
                    position: 'center',
                    formatter: function(params) {
                      return params.percent > 0 && params.selected ? params.percent + '%' : '';
                    },
                    fontSize: fontSize,
                    fontWeight: 'bold',
                    color: '#333',
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: emphasisFontSize,
                      fontWeight: 'bold',
                      color: '#205382',
                      formatter: function(params) {
                        return params.percent + '%';
                      }
                    },
                    itemStyle: {
                      shadowBlur: 20,
                      shadowColor: 'rgba(0, 0, 0, 0.3)'
                    }
                  },
                  labelLine: { show: false },
                  data: pieData,
                },
              ],
            };
            myChart.setOption(pieOption);
            
            // 添加resize事件监听
            window.addEventListener('resize', function() {
              if (myChart && !myChart.isDisposed()) {
                myChart.resize();
              }
            });
          }
        });
      });
    },
    // 各专业专家数量
    primaryMajor(){
      primaryMajor().then(res => {
            console.log(res);
      const data = res.data || [];
      // 颜色数组
      const colorArr = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#f16c7f'];
      // 计算总数
      const total = data.reduce((sum, item) => sum + (item.expertCount || 0), 0);
      const legend = data.map((item, idx) => ({
        name: item.primaryMajor|| '未知',
        color: colorArr[idx % colorArr.length],
        value: item.expertCount,
        percent: total ? ((item.expertCount / total * 100).toFixed(1) + '%') : '0%'
      }));
      // 生成 ECharts 饼图数据
      const pieData = data.map((item, idx) => ({
        value: item.expertCount,
        name: item.primaryMajor || '未知',
        itemStyle: {
          color: colorArr[idx % colorArr.length],
          shadowBlur: 10,
          shadowColor: colorArr[idx % colorArr.length]
        }
      }));
      this.$set(this.charts, 0, { title: '各专业专家数量', legend });
      this.$set(this.chartsOrder, 0, this.charts[0]);
      // 渲染饼图
      this.$nextTick(() => {
        const chartDom = document.getElementById('chart0');
        if (chartDom) {
          const myChart = echarts.init(chartDom);
          const pieOption = {
            tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
            legend: { show: false },
            animation: true,
            animationDuration: 800,
            animationEasing: 'cubicOut',
            animationDelay: 0,
            series: [
              {
                name: '各专业专家数量',
                type: 'pie',
                radius: ['70%', '85%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                  show: true,
                  position: 'center',
                  formatter: function(params) {
                    return params.percent > 0 && params.selected ? params.percent + '%' : '';
                  },
                  fontSize: '1vw',
                  fontWeight: 'bold',
                  color: '#333',
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '1.2vw',
                    fontWeight: 'bold',
                    color: '#205382',
                    formatter: function(params) {
                      return params.percent + '%';
                    }
                  },
                  itemStyle: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                  }
                },
                labelLine: { show: false },
                data: pieData,
              },
            ],
          };
          myChart.setOption(pieOption);
        }
      });
    });
    },
    back2(){
      this.editvisibale = false
      this.basicvisible = true
    },
    // 确保基础视图可见
    ensureBasicVisible() {
      console.log("检查basicvisible状态:", this.basicvisible);
      if (!this.basicvisible) {
        console.log("重置basicvisible为true");
        this.basicvisible = true;
        this.editvisibale = false;
      }
    },
    // 专家学历统计
    education(){
      education().then(res => {
            console.log(res);
      const data = res.data || [];
      // 过滤掉education为"未知"的数据项
      const filteredData = data.filter(item => item.education !== '未知');
      // 颜色数组
      const colorArr = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#f16c7f'];
      // 计算总数
      const total = filteredData.reduce((sum, item) => sum + (item.expertCount || 0), 0);
      const legend = filteredData.map((item, idx) => ({
        name: item.education|| '未知',
        color: colorArr[idx % colorArr.length],
        value: item.expertCount,
        percent: total ? ((item.expertCount / total * 100).toFixed(1) + '%') : '0%'
      }));
      // 生成 ECharts 饼图数据
      const pieData = filteredData.map((item, idx) => ({
        value: item.expertCount,
        name: item.education || '未知',
        itemStyle: {
          color: colorArr[idx % colorArr.length],
          shadowBlur: 10,
          shadowColor: colorArr[idx % colorArr.length]
        }
      }));
      this.$set(this.charts, 3, { title: '专家学历统计', legend });
      this.$set(this.chartsOrder, 3, this.charts[3]);
      // 渲染饼图
      this.$nextTick(() => {
        const chartDom = document.getElementById('chart3');
        if (chartDom) {
          const myChart = echarts.init(chartDom);
          const pieOption = {
            tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
            legend: { show: false },
            animation: true,
            animationDuration: 800,
            animationEasing: 'cubicOut',
            animationDelay: 0,
            series: [
              {
                name: '专家学历统计',
                type: 'pie',
                radius: ['70%', '85%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                  show: true,
                  position: 'center',
                  formatter: function(params) {
                    return params.percent > 0 && params.selected ? params.percent + '%' : '';
                  },
                  fontSize: '1vw',
                  fontWeight: 'bold',
                  color: '#333',
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '1.2vw',
                    fontWeight: 'bold',
                    color: '#205382',
                    formatter: function(params) {
                      return params.percent + '%';
                    }
                  },
                  itemStyle: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                  }
                },
                labelLine: { show: false },
                data: pieData,
              },
            ],
          };
          myChart.setOption(pieOption);
        }
      });
    });
    },
    // 已入库专家
    library(){
      library().then(res => {
        console.log(res);
        if (res && typeof res.data === 'number') {
        const stat = this.leftStats.find(i => i.title === '已入库专家');
        if (stat) stat.value = res.data;
      }
      });
    },
    // 已申请人数
    total(){
      total().then(res => {
        console.log(res);
        if (res && typeof res.data === 'number') {
        const stat = this.leftStats.find(i => i.title === '已申请人数');
        if (stat) stat.value = res.data;
      }
      });
    },
    // 已审核人数
    checked(){
      checked().then(res => {
        console.log(res);
        if (res && typeof res.data === 'number') {
        const stat = this.leftStats.find(i => i.title === '已审核人数');
        if (stat) stat.value = res.data;
      }
      });
    },
    // 审核未通过人数
    check(){
      check().then(res => {
        console.log(res);
        if (res && typeof res.data === 'number') {
        const stat = this.leftStats.find(i => i.title === '审核未通过人数');
        if (stat) stat.value = res.data;
      }
      });
    },
    // 待审核人数
    nocheck(){
      nocheck().then(res => {
        console.log(res);
        if (res && typeof res.data === 'number') {
        const stat = this.leftStats.find(i => i.title === '待审核人数');
        if (stat) stat.value = res.data;
      }
      });
    },
    handleView(row){
      this.editvisibale = true
      this.basicvisible = false
      console.log('查看专家信息:', row);
      
      // 获取专家详细信息
      getExpertBasicInfo(row.expertId).then(response => {
        if (response && response.data) {
          // 完整的专家信息
          this.row = response.data;
          
          // 获取专家附件信息
          getExpertAttach(row.expertId).then(attachResponse => {
            console.log('获取到的附件信息:', attachResponse);
            if (attachResponse.code === 200 && attachResponse.data) {
              const attachData = attachResponse.data;
              // 存储附件ID信息
              const fileIds = {
                idCard: attachData.idCard,
                certificate: attachData.certificate,
                qualification: attachData.qualification,
                supportMater: attachData.supportMater,
                applicationForm: attachData.applicationForm
              };
              console.log('提取的文件ID:', fileIds);
              
              // 将文件ID信息添加到row中
              this.$set(this.row, 'attachmentIds', fileIds);
            }
          }).catch(error => {
            console.error('获取附件信息失败:', error);
          });

          // 获取工作经历和其他信息
          if (this.row.expertId) {
            this.getWorkExperience(this.row.expertId);
            this.getSocialPart(this.row.expertId);
            this.getOtherInfo(this.row.expertId);
          } else {
            console.error('专家ID不存在');
          }
        }
      }).catch(error => {
        console.error('获取专家详细信息失败:', error);
        this.$message.error('获取专家详细信息失败');
      });
    },
    // 获取工作经历
    getWorkExperience(expertId) {
      console.log('获取工作经历，专家ID:', expertId);
      this.$http.get(`/admin/expertWorkExper/get/${expertId}`).then(response => {
        console.log('工作经历数据:', response.data);
        if (response && response.data) {
          // 映射后端字段到前端字段
          const mappedExperience = response.data.map(item => ({
            workUnit: item.orgName || '',
            startTime: item.startDate || '',
            endTime: item.endDate || '',
            jobTitle: item.title || '',
            jobDuty: item.position || '',
            id: item.id,
            expertId: item.expertId
          }));
          console.log('映射后的工作经历:', mappedExperience);
          this.$set(this.row, 'workExperience', mappedExperience);
        }
      }).catch(error => {
        console.error('获取工作经历失败:', error);
        this.$message.error('获取工作经历失败');
      });
    },
    // 获取社会兼职情况
    getSocialPart(expertId) {
      console.log('获取社会兼职情况，专家ID:', expertId);
      this.$http.get(`/admin/expertSocialPart/get/${expertId}`).then(response => {
        console.log('社会兼职数据:', response.data);
        if (response && response.data) {
          // 映射后端字段到前端字段
          const mappedSocialPart = response.data.map(item => ({
            partTimeUnit: item.orgName || '',
            startTime: item.startDate || '',
            endTime: item.endDate || '',
            role: item.role || '',
            id: item.id,
            expertId: item.expertId
          }));
          console.log('映射后的社会兼职:', mappedSocialPart);
          this.$set(this.row, 'socialExperience', mappedSocialPart);
        }
      }).catch(error => {
        console.error('获取社会兼职情况失败:', error);
        this.$message.error('获取社会兼职情况失败');
      });
    },
    // 获取其他信息
    getOtherInfo(expertId) {
      console.log('获取专家其他信息，专家ID:', expertId);
      this.$http.get(`/admin/expertOtherInfo/get/${expertId}`).then(response => {
        console.log('其他信息数据:', response.data);
        if (response && response.data) {
          // 映射后端字段到前端字段
          const otherInfo = {
            researchAchievements: response.data.researchResults || '',
            projectMatters: response.data.projectConsultation || '',
            id: response.data.id,
            expertId: response.data.expertId,
            createTime: response.data.createTime,
            updateTime: response.data.updateTime
          };
          console.log('映射后的其他信息:', otherInfo);
          this.$set(this.row, 'otherInfo', otherInfo);
        }
      }).catch(error => {
        console.error('获取其他信息失败:', error);
        this.$message.error('获取其他信息失败');
      });
    },
    //高级人才统计
    initMaster(){
      console.log("开始调用高级人才统计API...");
      master().then(res => {
        console.log("高级人才统计数据:", res);
        if (res.code === 200 && res.data) {
          const data = res.data || [];
          // 颜色数组
          const colorArr = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#f16c7f'];
          
          // 定义人才类型名称映射
          const masterTypeMap = {
            "isAcademic": "院士",
            "isDesignMaster": "全国/省级工程勘察设计大师",
            "isSubsidy": "享受国务院政府特殊津贴专家",
            "isSpecial": "人才紧缺的特殊专业、特殊领域技术人才"
          };
          
          // 计算总数
          const total = data.reduce((sum, item) => sum + (item.expertCount || 0), 0);
          console.log("高级人才统计总数:", total);
          
          // 映射数据并生成图例
          const legend = data.map((item, idx) => ({
            name: masterTypeMap[item.title] || item.title || '未知',
            color: colorArr[idx % colorArr.length],
            value: item.expertCount,
            percent: total ? ((item.expertCount / total * 100).toFixed(1) + '%') : '0%'
          }));
          console.log("高级人才统计图例数据:", legend);
          
          // 生成 ECharts 饼图数据
          const pieData = data.map((item, idx) => ({
            value: item.expertCount,
            name: masterTypeMap[item.title] || item.title || '未知',
            itemStyle: {
              color: colorArr[idx % colorArr.length],
              shadowBlur: 10,
              shadowColor: colorArr[idx % colorArr.length]
            }
          }));
          
          // 更新图表数据 - 确保更新了正确的索引位置
          this.$set(this.charts, 2, { title: '高级人才统计', legend });
          this.$set(this.chartsOrder, 2, { title: '高级人才统计', legend });
          console.log("已更新charts[2]和chartsOrder[2]");
          
          // 在下一个DOM更新周期渲染图表
          this.$nextTick(() => {
            const chartDom = document.getElementById('chart2');
            console.log("高级人才统计容器:", chartDom);
            if (chartDom) {
              try {
                // 清空容器内容，确保DOM干净
                chartDom.innerHTML = '';
                
                // 初始化图表
                const myChart = echarts.init(chartDom);
                const pieOption = {
                  tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
                  legend: { show: false },
                  animation: true,
                  animationDuration: 800,
                  animationEasing: 'cubicOut',
                  animationDelay: 0,
                  series: [
                    {
                      name: '高级人才统计',
                      type: 'pie',
                      radius: ['65%', '80%'], // 稍微减小半径，适应小屏幕
                      center: ['50%', '50%'],
                      avoidLabelOverlap: false,
                      label: {
                        show: true,
                        position: 'center',
                        formatter: function(params) {
                          return params.percent > 0 && params.selected ? params.percent + '%' : '';
                        },
                        fontSize: '0.9vw', // 缩小字体大小
                        fontWeight: 'bold',
                        color: '#333',
                      },
                      emphasis: {
                        label: {
                          show: true,
                          fontSize: '1.1vw', // 缩小字体大小
                          fontWeight: 'bold',
                          color: '#205382',
                          formatter: function(params) {
                            return params.percent + '%';
                          }
                        },
                        itemStyle: {
                          shadowBlur: 20,
                          shadowColor: 'rgba(0, 0, 0, 0.3)'
                        }
                      },
                      labelLine: { show: false },
                      data: pieData,
                    },
                  ],
                };
                
                // 设置图表配置
                myChart.setOption(pieOption);
                console.log("高级人才统计图表初始化成功");
                
                // 添加窗口大小改变时的自适应
                window.addEventListener('resize', function() {
                  if (myChart && !myChart.isDisposed()) {
                    myChart.resize();
                  }
                });
              } catch (e) {
                console.error("高级人才统计图表初始化失败:", e);
              }
            } else {
              console.error("没有找到高级人才统计图表容器");
            }
          });
        } else {
          console.error("获取高级人才统计数据失败", res);
        }
      }).catch(error => {
        console.error("调用master接口错误:", error);
      });
    },
    //未入库申请列表
    getUnstoredExperts(params = {page: 1, pageSize: 10,auditStatus: '通过'}) {
      console.log("开始调用未入库申请列表API...");
      this.loading = true;
      
      // 构建默认参数，不设置auditStatus，获取所有未入库申请
      const defaultParams = { 
        page: this.currentPage, 
        pageSize: this.pageSize
      };
      
      // 合并传入的参数
      const finalParams = { ...defaultParams, ...params };
      console.log("未入库申请列表请求参数:", finalParams);
      
      fetchUnstoredExperts(finalParams).then(response => {
        console.log("未入库申请列表数据:", response);
        if (response && response.data) {
          this.tableData = response.data.records || [];
          this.total = response.data.total || 0;
          console.log("未入库申请列表已更新:", this.tableData.length, "条记录");
        } else {
          console.error("未入库申请列表返回数据异常:", response);
          this.tableData = [];
          this.total = 0;
        }
      }).catch(error => {
        console.error("调用未入库申请列表API失败:", error);
        this.tableData = [];
        this.total = 0;
      }).finally(() => {
        this.loading = false;
      });
    },
    // 分页相关方法
    handleSizeChange(size) {
      this.pageSize = size;
      this.getUnstoredExperts({page: this.currentPage, pageSize: size,auditStatus: '通过'});
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getUnstoredExperts({page: page, pageSize: this.pageSize,auditStatus: '通过'});
    },
  },
  mounted() {
    console.log("开始初始化仪表板...");
    // 确保基础视图可见
    this.ensureBasicVisible();
    
    // 设置环形图顺序：各专业专家数量、专家数量职称统计、高级人才统计、专家学历统计
    this.chartsOrder = [this.charts[0], this.charts[1], this.charts[2], this.charts[3]]
    console.log("初始化chartsOrder:", this.chartsOrder.map(c => c.title));
    
    // 优先初始化高级人才统计
    console.log("开始调用initMaster...");
    this.initMaster(); // 优先初始化高级人才统计图表
    
    this.expertcount();
    this.primaryMajor();
    this.education();
    this.library();
    this.total();
    this.checked();
    this.check();
    this.nocheck();
    
    // 确保这两个方法单独调用，且有日志输出
    console.log("开始调用getUnstoredExperts...");
    this.getUnstoredExperts();
    
    // 渲染所有环形图（除了高级人才统计）
    const pieDataArr = [
      // 各专业专家数量
      [
        { value: 12, name: '专业1xx', itemStyle: { color: '#5470c6', shadowBlur: 10, shadowColor: '#5470c6' } },
        { value: 9, name: '专业2xx', itemStyle: { color: '#91cc75', shadowBlur: 10, shadowColor: '#91cc75' } },
        { value: 7, name: '专业3xx', itemStyle: { color: '#fac858', shadowBlur: 10, shadowColor: '#fac858' } },
        { value: 6, name: '专业4xx', itemStyle: { color: '#ee6666', shadowBlur: 10, shadowColor: '#ee6666' } },
        { value: 5, name: '专业5xx', itemStyle: { color: '#73c0de', shadowBlur: 10, shadowColor: '#73c0de' } },
      ],
      // 专家数量职称统计
      [
        { value: 15, name: '正高级职称', itemStyle: { color: '#5470c6', shadowBlur: 10, shadowColor: '#5470c6' } },
        { value: 10, name: '副高级职称', itemStyle: { color: '#91cc75', shadowBlur: 10, shadowColor: '#91cc75' } },
        { value: 8, name: '同等职业资格', itemStyle: { color: '#fac858', shadowBlur: 10, shadowColor: '#fac858' } },
        { value: 7, name: '其他', itemStyle: { color: '#ee6666', shadowBlur: 10, shadowColor: '#ee6666' } },
      ],
      // 高级人才统计-由initMaster方法通过API加载
      [],
      // 专家学历统计
      [
        { value: 8, name: '博士研究生', itemStyle: { color: '#5470c6', shadowBlur: 10, shadowColor: '#5470c6' } },
        { value: 12, name: '硕士研究生', itemStyle: { color: '#91cc75', shadowBlur: 10, shadowColor: '#91cc75' } },
        { value: 10, name: '大学本科', itemStyle: { color: '#fac858', shadowBlur: 10, shadowColor: '#fac858' } },
        { value: 7, name: '大学专科', itemStyle: { color: '#ee6666', shadowBlur: 10, shadowColor: '#ee6666' } },
        { value: 5, name: '高中中专', itemStyle: { color: '#73c0de', shadowBlur: 10, shadowColor: '#73c0de' } },
        { value: 3, name: '初中及以下', itemStyle: { color: '#3ba272', shadowBlur: 10, shadowColor: '#3ba272' } },
      ],
    ]
    
    this.chartsOrder.forEach((c, idx) => {
      // 跳过高级人才统计图表(idx=2)，它会在initMaster中单独处理
      if (idx === 2) return;
      
      console.log("初始化图表:", idx, c.title);
      const pieData = pieDataArr[idx]
      if (!pieData || pieData.length === 0) return;
      
      this.$nextTick(() => {
        const chartDom = document.getElementById('chart' + idx)
        if (chartDom) {
          // 检查是否存在图表实例，如果有先销毁
          let existingChart = echarts.getInstanceByDom(chartDom);
          if (existingChart) {
            existingChart.dispose();
          }
          
          // 根据容器宽度自适应调整字体大小和半径
          const containerWidth = chartDom.clientWidth || 300;
          const fontSize = '1vw';
          const emphasisFontSize = '1.2vw';
          const radiusPercentage = containerWidth < 300 ? ['60%', '75%'] : ['65%', '80%'];
          
          const myChart = echarts.init(chartDom)
          const pieOption = {
            tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
            legend: { show: false },
            animation: true,
            animationDuration: 800,
            animationEasing: 'cubicOut',
            animationDelay: 0,
            series: [
              {
                name: c.title,
                type: 'pie',
                radius: radiusPercentage,
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                  show: true,
                  position: 'center',
                  formatter: function(params) {
                    return params.percent > 0 && params.selected ? params.percent + '%' : '';
                  },
                  fontSize: fontSize,
                  fontWeight: 'bold',
                  color: '#333',
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: emphasisFontSize,
                    fontWeight: 'bold',
                    color: '#205382',
                    formatter: function(params) {
                      return params.percent + '%';
                    }
                  },
                  itemStyle: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                  }
                },
                labelLine: { show: false },
                data: pieData,
              },
            ],
          }
          myChart.setOption(pieOption)
          console.log(`图表${idx}初始化成功`)
          
          // 添加窗口resize事件监听
          window.addEventListener('resize', function() {
            if (myChart && !myChart.isDisposed()) {
              const containerWidth = chartDom.clientWidth || 300;
              const fontSize = '1vw';
              const emphasisFontSize = '1.2vw';
              const radiusPercentage = containerWidth < 300 ? ['60%', '75%'] : ['65%', '80%'];       
              // 更新配置
              myChart.setOption({
                series: [{
                  radius: radiusPercentage,
                  label: { fontSize: fontSize },
                  emphasis: { label: { fontSize: emphasisFontSize } }
                }]
              });
              myChart.resize();
            }
          });
        }
      })
    })

    // 为Echarts设置响应式字体大小
    const pieOptions = {
      series: [
        {
          label: {
            fontSize: '1vw'
          },
          emphasis: {
            label: {
              fontSize: '1.2vw'
            }
          }
        }
      ]
    };
    
    // 确保图例区域可以滚动
    this.$nextTick(() => {
      const legendRows = document.querySelectorAll('.chart-legend-row');
      legendRows.forEach(row => {
        if (row.scrollHeight > row.clientHeight) {
          console.log('图例区域需要滚动', row);
          row.style.overflowY = 'auto';
        }
      });
    });
  },
}
</script>

<style scoped>
.dashboard-count {
  padding: 2vw 2vw 0 2vw;
  background: #f5f6fa;
  min-height: 100vh;
}
.left-col {
  min-width: 10vw;
  max-width: 12vw;
}
.stat-card {
  border-radius: 0.8vw !important;
  box-shadow: 0 0.1vw 0.4vw rgba(80,120,200,0.10);
  margin-bottom: 1vh !important;
  min-height: 10vh;
  max-height: 14vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5vh 1.2vw;
  transition: box-shadow 0.2s;
  background: #fff;
  text-align: center;
}
.stat-card:hover {
  box-shadow: 0 4px 16px rgba(80,120,200,0.14);
}
.stat-value {
  font-size: 1.2vw;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
}
.stat-title {
  font-size: 1vw;
  color: #fff;
  font-weight: 400;
  opacity: 0.96;
  letter-spacing: 0.2px;
  text-align: center;
  width: 100%;
}
.stat-icon {
  font-size: 2vw;
  margin-left: 6px;
  color: #FFD966;
  opacity: 0.7;
}
.middle-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1vh;
}
.expert-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFD966 0%, #FFD966 100%) !important;
  height: 100%;
  min-height: 10vh;
  max-height: 14vh;
  width: 100%;
  border-radius: 0.8vw;
  box-shadow: 0 0.1vw 0.4vw #e0e0e0;
  padding: 1.5vh 1.2vw;
  text-align: center;
}
.expert-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.expert-value {
  font-size: 2.2vw;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.expert-title {
  font-size: 1.2vw;
  color: #fff;
  font-weight: 400;
}
.expert-icon {
  font-size: 2.8vw;
  color: #fff;
  opacity: 0.25;
  margin-left: 10px;
}
.chart-row {
  gap: 18px 0;
  justify-content: space-between;
}
.chart-card {
  border-radius: 0.8vw !important;
  box-shadow: 0 0.1vw 0.4vw rgba(80,120,200,0.10);
  background: #fff;
  width: 100%;
  min-width: auto;
  max-width: none;
  min-height: 40vh;
  max-height: 50vh;
  margin: 0 auto 1vh auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2vh 1vw;
  transition: box-shadow 0.2s, transform 0.18s;
  overflow: hidden;
}
.chart-card:hover {
  box-shadow: 0 6px 18px rgba(80,120,200,0.16);
  transform: translateY(-2px) scale(1.01);
}
.chart-title {
  width: 90%;
  display: flex;
  align-items: center;
  font-size: 1vw;
  font-weight: 700;
  color: #205382;
  margin-bottom: 1vh;
  letter-spacing: 0.05vw;
}

/* 为高级人才统计卡片单独定义标题样式 */
.talent-card .chart-title {
  font-size: 0.9vw;
  margin-bottom: 0.5vh;
}

.chart-title i {
  margin-right: 0.5em;
  font-size: 1.4vw;
}

.talent-card .chart-title i {
  font-size: 1.2vw;
}
.echart-box {
  width: 100%;
  height: 18vh !important;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5vh;
  max-width: 100%;
  overflow: hidden;
}
.chart-legend-row {
  width: 100%;
  margin: 0;
  padding: 0.8vh 1.5vw 0 1.2vw;
  margin-top: -0.5vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  overflow-y: auto;
  flex-grow: 1;
  max-height: calc(100% - 20vh);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
  -webkit-overflow-scrolling: touch;
  max-height: 16vh;
}
.chart-legend-row::-webkit-scrollbar {
  width: 4px;
}
.chart-legend-row::-webkit-scrollbar-track {
  background: transparent;
}
.chart-legend-row::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}
.legend-item-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  margin-bottom: 0.3vw;
  width: 100%;
  gap: 0 5px;
  padding: 2px 0;
}
.legend-color {
  display: inline-block;
  width: 0.8vw;
  height: 0.8vw;
  min-width: 0.5vw;
  min-height: 0.5vw;
  border-radius: 50%;
  margin-right: 0.2vw;
  border: 0.05vw solid #fff;
  box-shadow: 0 0.05vw 0.1vw #e0e0e0;
  grid-column: 1;
  flex-shrink: 0;
}
.legend-left {
  font-size: 0.65vw;
  color: #444;
  font-weight: 500;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  grid-column: 2;
  line-height: 1.2;
  padding-right: 3px;
  min-width: 0;
  hyphens: auto;
}
.legend-right {
  min-width: 30px;
  color: #205382;
  font-weight: 700;
  text-align: right;
  grid-column: 3;
  white-space: nowrap;
  font-size: 0.75vw;
}
.legend-percent {
  min-width: 40px;
  color: #bbb;
  font-weight: 400;
  text-align: right;
  grid-column: 4;
  white-space: nowrap;
  font-size: 0.75vw;
}
.table-card {
  border-radius: 0.7vw !important;
  box-shadow: 0 0.1vw 0.4vw rgba(80,120,200,0.10);
  margin-top: 0.6vw;
  margin-bottom: 1vw;
  background: #fff;
  border: 0.05vw solid #FFD966;
  padding: 0;
}
.table-header {
  font-size: 1.2vw;
  font-weight: 600;
  color: #205382;
  display: flex;
  align-items: center;
  padding: 10px 0;
  margin-bottom: -5px;
}
.table-header i {
  margin-right: 0.3vw;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .chart-card {
    min-width: 300px;
  }
}

@media (max-width: 1400px) {
  .chart-card {
    min-width: 280px;
  }
}

@media (max-width: 1200px) {
  .dashboard-count {
    padding: 6px 1px 0 1px;
  }
  .stat-card, .chart-card {
    border-radius: 8px !important;
    box-shadow: 0 1px 4px #e0e0e0;
    padding: 8px 6px;
  }
  .stat-value, .expert-value {
    font-size: 1rem;
  }
  .chart-card {
    min-width: 220px;
    max-width: 100%;
    min-height: 220px;
    padding: 10px 0;
  }
  .echart-box {
    height: 100px !important;
  }
  .legend-item-row {
    font-size: 0.9rem;
  }
}

@media (max-width: 900px) {
  .dashboard-count {
    padding: 2px 0 0 0;
  }
  .stat-card, .chart-card {
    border-radius: 6px !important;
    box-shadow: 0 1px 2px #e0e0e0;
    padding: 4px 3px;
  }
  .stat-value, .expert-value {
    font-size: 0.9rem;
  }
  .chart-card {
    min-height: 200px;
    margin-bottom: 4px;
  }
  .echart-box {
    height: 100px !important;
  }
  .legend-item-row {
    font-size: 0.8rem;
  }
}

/* 添加更多媒体查询，优化在不同屏幕尺寸下的显示 */
@media (max-width: 1600px) {
  .chart-row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }
  .chart-legend-row, .talent-legend-row {
    padding-left: 12px;
    padding-right: 12px;
  }
  .echart-box {
    height: 180px !important;
  }
}

@media (max-width: 1400px) {
  .chart-card {
    padding: 14px 0;
  }
  .chart-row {
    margin-left: -5px !important;
    margin-right: -5px !important;
  }
  .chart-legend-row, .talent-legend-row {
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 16px;
  }
  .legend-item-row, .talent-legend-item-row {
    margin-bottom: 4px;
  }
  .echart-box {
    height: 160px !important;
  }
}

@media (max-width: 1200px) {
  .chart-card {
    min-height: 440px;
  }
  .echart-box {
    height: 140px !important;
  }
  .chart-title {
    font-size: 1rem;
  }
  .chart-legend-row, .talent-legend-row {
    max-height: 200px;
  }
  .legend-left, .talent-legend-left {
    font-size: 0.7rem;
  }
  .legend-right, .legend-percent, .talent-legend-right, .talent-legend-percent {
    font-size: 0.7rem;
  }
}

@media (max-width: 992px) {
  .chart-card {
    min-height: 400px;
  }
  .echart-box {
    height: 130px !important;
  }
}

/* 添加小屏幕设备的响应式优化 */
@media (max-width: 768px) {
  .dashboard-count {
    padding: 5px;
  }
  .chart-card {
    min-height: 360px;
    margin-bottom: 10px;
  }
  .echart-box {
    height: 120px !important;
  }
  .chart-title {
    font-size: 0.9rem;
  }
  .chart-legend-row, .talent-legend-row {
    max-height: 180px;
    margin-top: 10px;
  }
  .legend-color, .talent-legend-color {
    width: 0.8em;
    height: 0.8em;
  }
  .el-col {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}
.talent-echart {
  width: 100%;
  height: 180px;
  min-height: 140px;
}
.talent-card {
  min-height: 32vh;
  max-height: 38vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.talent-echart-box {
  width: 100%;
  height: 16vh;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5vh;
  flex-shrink: 0;
}
.talent-legend-row {
  width: 100%;
  margin: 0;
  padding: 0.8vh 0.8vw 0 0.8vw;
  margin-top: -0.5vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  overflow-y: auto;
  flex-grow: 1;
  max-height: calc(100% - 20vh);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
  -webkit-overflow-scrolling: touch;
}
.talent-legend-row::-webkit-scrollbar {
  width: 5px;
}
.talent-legend-row::-webkit-scrollbar-track {
  background: transparent;
}
.talent-legend-row::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}
.talent-legend-item-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  margin-bottom: 6px;
  width: 100%;
  gap: 0 5px;
  padding-right: 5px;
}
.talent-legend-color {
  display: inline-block;
  width: 0.7vw;
  height: 0.7vw;
  min-width: 0.5vw;
  min-height: 0.5vw;
  border-radius: 50%;
  margin-right: 0.2vw;
  border: 0.05vw solid #fff;
  box-shadow: 0 0.05vw 0.1vw #e0e0e0;
  grid-column: 1;
  flex-shrink: 0;
}
.talent-legend-left {
  font-size: 0.65vw;
  color: #444;
  font-weight: 500;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  line-height: 1.2;
  padding-right: 3px;
  min-width: 0;
  max-width: 100%;
}
.talent-legend-right {
  min-width: 24px;
  color: #205382;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-size: 0.7vw;
  padding-left: 2px;
}
.talent-legend-percent {
  color: #909399;
  font-weight: 400;
  margin-left: 0.2em;
  text-align: right;
  min-width: 36px;
  white-space: nowrap;
  font-size: 0.7vw;
}
@media (max-width: 1200px) {
  .talent-legend-left,
  .talent-legend-right,
  .talent-legend-percent {
    font-size: 0.8vw;
  }
  
  .talent-legend-color {
    width: 1vw;
    height: 1vw;
  }
  
  .talent-legend-item-row {
    margin-bottom: 8px;
  }
}
@media (max-width: 992px) {
  .talent-legend-left {
    font-size: 0.9vw;
    line-height: 1.3;
  }
  
  .talent-legend-right,
  .talent-legend-percent {
    font-size: 0.9vw;
  }
}
@media (max-width: 576px) {
  .talent-legend-left,
  .talent-legend-right,
  .talent-legend-percent {
    font-size: 1.2vw;
  }
  
  .talent-legend-color {
    width: 1.5vw;
    height: 1.5vw;
  }
  
  .talent-legend-item-row {
    margin-bottom: 10px;
  }
}
</style>    
